extends /layouts/_pages

block vars
  -
    page = {
      title: 'Laptops & Tablets',
      breadcrumbs: {
        'Catalog': 'catalog.html'
      },
      quantity: 367
    }

block pages
  div.uk-grid-medium(uk-grid)

    //- Filters
    aside#filters.uk-width-1-4.tm-aside-column.tm-filters(
      uk-offcanvas="overlay: true; " +
                   "container: false;")

      div.uk-offcanvas-bar.uk-padding-remove
        div(class="uk-card " +
                  "uk-card-default " +
                  "uk-card-small " +
                  "uk-flex " +
                  "uk-flex-column " +
                  "uk-height-1-1")

          //- Header
          header.uk-card-header.uk-flex.uk-flex-middle
            div.uk-grid-small.uk-flex-1(uk-grid)
              div.uk-width-expand
                div.uk-h3 Filters
              button.uk-offcanvas-close(type="button" uk-close)

          //- Accordion
          div.uk-margin-remove.uk-flex-1.uk-overflow-auto(
            uk-accordion="multiple: true; targets: > .js-accordion-section"
            style="flex-basis: auto")

            //- Categories
            section.uk-card-small.uk-card-body
              h4.uk-margin-small-bottom Categories
              ul.uk-nav.uk-nav-default
                each category in catalog
                  each item in category.items
                    li: a(href="subcategory.html")= item
                  - break

            //- Prices
            section.uk-card-body.uk-open.js-accordion-section
              h4.uk-accordion-title.uk-margin-remove Prices
              div.uk-accordion-content
                div.uk-grid-small.uk-child-width-1-2.uk-text-small(uk-grid)
                  div
                    div.uk-inline
                      span.uk-form-icon.uk-text-xsmall from
                      input.uk-input(type="text" placeholder="$59")
                  div
                    div.uk-inline
                      span.uk-form-icon.uk-text-xsmall to
                      input.uk-input(type="text" placeholder="$6559")

            //- Properties
            each property in filters
              if property.id= 1
                section.uk-card-body.js-accordion-section(
                  class= { "uk-open": property.isOpen })
                  h4.uk-accordion-title.uk-margin-remove= property.title
                    if property.description
                      +icon("question", ".75")(
                        class="tm-help-icon"
                        onclick="event.stopPropagation();")
                      div.uk-margin-remove(
                        uk-drop="mode: click;" +
                                "boundary-align: true; " +
                                "boundary: !.uk-accordion-title; " +
                                "pos: bottom-justify;")
                        div(class="uk-card " +
                                  "uk-card-body " +
                                  "uk-card-default " +
                                  "uk-card-small " +
                                  "uk-box-shadow-xlarge " +
                                  "uk-text-small")= property.description
                  div.uk-accordion-content
                    ul.uk-list.tm-scrollbox
                      each item in property.items
                        li
                          input.tm-checkbox(
                            id= property.name + "-" + item.id
                            name= property.name
                            value= item.id
                            type="checkbox")
                          label(for= property.name + "-" + item.id)
                            span= item.name
                              |
                              |
                              span.uk-text-meta.uk-text-xsmall= item.quantity
              - break

            //- Reset filters
            div.uk-card-body
              button.uk-button.uk-button-default.uk-width-1-1
                +icon("close", ".75")(class="uk-margin-xsmall-right")
                | Reset all filters

    //- Content
    div.uk-width-expand
      include /partials/_products